<template>
  <div>
    <main>
      <section class="btn1">
        <a href="#">移入</a>
      </section>
      <section class="btn2">
        <div>点击</div>
        <div>点击</div>
      </section>
      <section class="btn3">
        <div>
          <span>移入</span>
        </div>
      </section>
      <section class="btn4">
        <div>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          BUTTON
        </div>
      </section>
      <section class="btn5">
        <div>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          BUTTON
        </div>
      </section>
      <section class="btn6">
        <div>
          <span class="front">Click</span>
          <span class="center"></span>
          <span class="back">Here</span>
        </div>
      </section>
      <section class="btn7">
        <div>BUTTON</div>
      </section>
      <section class="btn8">
        <div>
          <span>BUTTON</span>
        </div>
      </section>
      <section class="btn9">
        <div>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          BUTTON
        </div>
      </section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
    </main>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {}
};
</script>

<style lang="scss" scoped>
@import "^/common/reset.scss";
@import "^/mixins/mixins.scss";
@import "^/common/common.scss";
@import "^/mixins/utils.scss";
@import "^/common/keyframe.scss";

main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(9, 400px);
  background-color: #000;

  grid-template-areas: "A B C D" "E F G H" "I I K L";

  .btn1 {
    place-self: center;
    @include btn(varietycolorbtn);
  }

  .btn2 {
    place-self: center;

    @include btn(clickripplebtn);
  }

  .btn3 {
    width: 100%;
    height: 100%;
    background-color: #f2f3f7;
    display: grid;
    @include btn(shadowbtn);
    > div {
      place-self: center;
    }
  }
  .btn4 {
    width: 100%;
    height: 100%;
    display: grid;
    background-color: #0c002b;
    @include btn(linebtn);
    > div {
      place-self: center;
    }
  }

  .btn5 {
    width: 100%;
    height: 100%;
    display: grid;
    background-color: #031321;
    @include btn(filterbtn);
    > div {
      place-self: center;
    }
  }

  .btn6 {
    width: 100%;
    height: 100%;
    display: grid;
    @include btn(Flipbtn3d);
    > div {
      place-self: center;
    }
  }

  .btn7 {
    width: 100%;
    height: 100%;
    display: grid;
    @include btn(HoverEffects);
    > div {
      place-self: center;
    }
  }

  .btn8 {
    width: 100%;
    height: 100%;
    display: grid;
    background-color: #f2f2f2;
    @include btn(movebtn);
    > div {
      place-self: center;
    }
  }

  .btn9 {
    width: 100%;
    height: 100%;
    display: grid;
    background-color: #f2f2f2;
    grid-area: I;
    @include btn(bxg);
    > div {
      place-self: center;
    }
  }
}
</style>
